<template>
  <div
    v-loading="loading"
    element-loading-background="rgba(0, 0, 0, 0.1)"
    class="w100p h100p"
    ref="contrast"
    @click="gopeople()"
  ></div>
</template>

<script>
export default {
  props: {
    CID: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      loading: false,
      perAll: 0,
      ageData: [
        {
          name: "18岁以下",
          value: 0
        },
        {
          name: "18-30岁",
          value: 0
        },
        {
          name: "30-45岁",
          value: 0
        },
        {
          name: "45-60岁",
          value: 0
        },
        {
          name: "60-70岁",
          value: 0
        },
        {
          name: "70岁以上",
          value: 0
        }
      ]
    };
  },
  methods: {
    gopeople() {
      this.$router.push({
        path: "/personnel/Population"
      });
    },
    getdata() {
      var param = {
        CID: this.CID
      };
      var params = JSON.stringify(param);
      this.loading = true;
      this.$api.dataSc
        .age(params)
        .then((res) => {
          this.loading = false;
          if (res.code == 0) {
            this.ageData = res.data;
            // this.ageData.map((item) => {
            //   this.perAll += item.value;
            // });
            this.perAll = this.ageData.reduce((pre, item) => {
              return pre + item.value;
            }, 0);
          }
          this.echarth();
        })
        .catch((err) => {
          this.loading = false;
          // this.$message.error("服务器连接失败请重试"+err)
          this.echarth();
        });
    },
    echarth() {
      let myChart = this.$echarts.init(this.$refs.contrast);
      let index = 0;
      var colorList = ["#73DDFF", "#73ACFF", "#FDD56A", "#FDB36A", "#FD866A", "#9E87FF", "#58D5FF"];

      var fontColor = "#fff";
      var data = this.ageData;

      let option = {
        color: colorList,
        title: {
          text: this.perAll,
          subtext: "总人口数",
          textStyle: {
            color: "#fff",
            fontSize: 24
          },
          textAlign: "center",
          subtextStyle: {
            fontSize: 18,
            color: ["#ff9d19"]
          },
          x: "33%",
          y: "35%"
        },
        grid: {
          bottom: 100,
          left: 100,
          right: "10%"
        },
        // tooltip: {
        //   trigger: "item",
        //   formatter: "{b}<br/> {c}亿元 +  ({d}%)",
        // },
        legend: {
          orient: "vertical",
          right: "0",
          top: "10",
          textStyle: {
            color: "#fff",
            fontSize: 10
          },
          icon: "roundRect",

          data: data,
          formatter: function (name) {
            var total = 0;
            var target;
            for (var i = 0, l = data.length; i < l; i++) {
              total += data[i].value;
              if (data[i].name == name) {
                target = data[i].value;
              }
            }
            return name + "：" + target + "人";
          }
        },
        series: [
          // 主要展示层的
          {
            radius: ["60%", "90%"],
            center: ["35%", "50%"],
            type: "pie",
            label: {
              position: "inner",
              formatter: "{d}%"
            },
            labelLine: {
              normal: {
                show: true,
                length: 30,
                length2: 55
              },
              emphasis: {
                show: true
              }
            },
            data: data
          }
        ]
      };

      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.getdata();
    });
    this.resizefun = () => {
      this.$echarts.init(this.$refs.contrast).resize();
    };
    window.addEventListener("resize", this.resizefun);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.resizefun);
    this.resizefun = null;
  }
};
</script>

<style>
/* .app{
  background: #061930;
} */
</style>
